<template>
  <div class="container">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
      <div class="inputBox">
        <input type="text" v-model="userName" :placeholder="$t('请输入昵称')" />
      </div>
      <div class="btnBox">
          <van-button block type="info" @click="changeUserName">{{$t('提交')}}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
export default {
  name: "changeUsername",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("修改昵称"),
        close: false,
        btn: "",
        isBlue: true,
      },
      userName: "",
    };
  },
  mounted() {},
  methods: {
    changeUserName() {
      let data = {
        nickname: this.userName
      }
      $postAxios(api.setNickName, data, (res) => {
        if (res.code == 0) {
          this.$toast(this.$t("设置成功"));
          setTimeout(() => {
              this.$router.go(-1);
          }, 600)
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-top: 40px;
  width: 100%;
  min-height: 100vh;
  height: 100%;
  box-sizing: border-box;
  background-color: #f7f6fb;
  .content {
    margin: 0 auto;
    padding: 50px 0;
    width: 80%;
    .inputBox {
        margin-bottom: 50px;
        width: 100%;
        input {
            padding: 0 20px;
            width: 100%;
            height: 40px;
            font-size: 14px;
            border-radius: 30px;
            border: solid 1px #e6eaed;
            box-sizing: border-box;
        }
    }
  }
}
</style>